<template>
	<d2-container v-if="detailsShow">
		<div slot="header">
			<el-link type="primary" @click="detailsShow = false">
				<i class="el-icon-back"></i>
				返回
			</el-link>

			<el-row :gutter="20" style="font-size:14px ;margin-top: 10px;">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>订单号：{{ orderDeta.order_sn }}</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>下单时间：{{ orderDeta.created_at }}</span>
					</div>
				</el-col>
				<!-- <el-col :span="6">
					<div class="grid-content bg-purple">
						<span>备注：{{ orderDeta.bz }}</span>
					</div>
				</el-col> -->
				<el-col :span="6">
					<div class="grid-content bg-purple" v-if="orderDeta.state == 1"><span>订单状态：未支付</span></div>
					<div class="grid-content bg-purple" v-if="orderDeta.state == 2"><span>订单状态：已支付</span></div>
					<div class="grid-content bg-purple" v-if="orderDeta.state == 3"><span>订单状态：已完成</span></div>
					<div class="grid-content bg-purple" v-if="orderDeta.state == 4"><span>订单状态：已退款</span></div>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="font-size:14px ;margin-top: 10px;">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>价格：{{ orderDeta.price }}</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>优惠金额：{{ orderDeta.yhprice }}</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>配送费：{{ orderDeta.psprice }}</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple" v-if="orderDeta.type == 1"><span>支付方式：微信</span></div>
					<div class="grid-content bg-purple" v-if="orderDeta.type == 2"><span>支付方式：余额</span></div>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="font-size:14px ;margin-top: 10px;">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>客户名称：{{ orderDeta.username }}</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>手机号：{{ orderDeta.mobile }}</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>地址：{{ orderDeta.city }}{{ orderDeta.area }}{{ orderDeta.street }}{{ orderDeta.address }}</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<span>备注：{{ orderDeta.bz }}</span>
					</div>
				</el-col>
			</el-row>
		</div>
		<div>
			<template>
				<el-table border stripe style="width: 100%" :data="orderPro">
					<el-table-column type="index" width="50" label="序号"></el-table-column>
					<el-table-column label="商品图片" width="90">
						<!-- 图片的显示 -->
						<template slot-scope="scope">
							<el-avatar :src="baseUrl + scope.row.thumb" :size="50" v-if="scope.row.thumb != null"></el-avatar>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="商品"></el-table-column>
					<el-table-column prop="des" label="描述"></el-table-column>
					<el-table-column prop="guige" label="单位"></el-table-column>
					<el-table-column prop="num" label="下单数量"></el-table-column>
					<el-table-column prop="price" label="下单单价"></el-table-column>
					<el-table-column prop="priceTotal" label="下单小计"></el-table-column>
				</el-table>
			</template>
			<div class="jineBottom">
				<p>
					<span>配送金额：{{ orderDeta.psprice }}</span>
					<span>优惠金额：{{ orderDeta.yhprice }}</span>
				</p>
				<p>
					<span>商品总价：{{ orderDeta.zprice }}</span>
					<span>
						实付金额：
						<i style="color: red;font-size:20px;">￥{{ orderDeta.price }}</i>
					</span>
				</p>
			</div>
		</div>
		<template slot="footer" v-if="orderDeta.state != 4 && orderDeta.state != 1">
			<div><el-button type="danger" @click="onRefund">退款</el-button></div>
		</template>
	</d2-container>
</template>

<script>
import { getOrderEdit, postOrderUpdate } from '@/api/api';
export default {
	props: {
		value: Boolean,
		id: Number
	},
	data() {
		return {
			detailsShow: false,
			orderDeta: {},
			orderPro: [],
			baseUrl: process.env.VUE_APP_URL
		};
	},
	watch: {
		value(val) {
			if (val) {
				this.detailsShow = val;
			}
		},
		detailsShow(val) {
			if (val && this.id != -1) {
				this.getOrderDeta();
			} else {
				this.$emit('input', val);
			}
		}
	},
	methods: {
		getOrderDeta() {
			getOrderEdit(this.id).then(res => {
				if (res.state == 0) {
					this.orderDeta = res.data;
					this.orderPro = res.data.order_pro;
					for (var i = 0; i < this.orderPro.length; i++) {
						if (this.orderPro[i].price != '' && this.orderPro[i].num != null) {
							this.orderPro[i].priceTotal = parseInt(this.orderPro[i].num) * parseInt(this.orderPro[i].price);
						}
					}
				}
			});
		},
		//退款
		onRefund() {
			this.$confirm('此操作将退款给用户, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let data = {
					id: this.id,
					state: 4
				};
				postOrderUpdate(data).then(res => {
					if (res.state == 0) {
						this.$message.success('退款成功!');
						this.getOrderDeta();
					}
				});
			});
		}
	}
};
</script>

<style>
.jineBottom {
	float: right;
}
.jineBottom p span {
	padding-right: 15px;
}
</style>
